<template>
  <div class="app-container">
    <div style='position: relative;'>
      <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!--表单信息-->
        <el-tab-pane name="1">
          <span slot="label"><i class="el-icon-form"></i> 表单信息</span>
          <el-col :span="16" :offset="4">
            <div v-for="(form, index) in flowForms" :key="index">
              <v-form-render v-if="form.formType === 'online'" ref="vFormRef"/>
              <component v-else :is="form.formContent" ref="vFormRef"/>
            </div>
          </el-col>
        </el-tab-pane>
        <!--流程流转记录-->
        <el-tab-pane name="2">
          <span slot="label"><i class="el-icon-flow-record"></i> 流转记录</span>
          <flow-record v-if="flowRecordOpen" :flowRecordList="flowRecordList" />
        </el-tab-pane>
        <el-tab-pane name="3">
          <span slot="label"><i class="el-icon-flow"></i> 流程图</span>
          <Bpmn-viewer v-if="flowDataOpen" :flowData="flowData" :procInsId="taskForm.procInsId"/>
        </el-tab-pane>
      </el-tabs>
      <el-button v-if="flowTaskData.recallTask && !flowTaskData.refill" style='position: absolute;right:70px;top:5px;' size="mini" type="danger" @click="handleTaskRecall">撤回</el-button>
      <el-button v-if="flowTaskData.revokeTask" style='position: absolute;right:155px;top:5px;' size="mini" type="danger" @click="handleTaskRevoke">撤销</el-button>
      <el-button v-if="flowTaskData.finishTime == null" style='position: absolute;right:70px;top:5px;' size="mini" type="danger" @click="handleCancelTask">取消申请</el-button>
      <el-button style='position: absolute;right:10px;top:5px;' size="mini" type="info" @click="handlePrint">打印</el-button>
    </div>

    <!--打印预览-->
    <el-dialog
      :visible.sync="printVisible"
      title="打印预览"
      width="70%"
      append-to-body
    >
      <printer v-if="printVisible" :printData="printData"></printer>
    </el-dialog>
  </div>
</template>

<script>
import { updateCopy } from "@/api/flowable/copy";
import {flowRecord, taskRecall, taskRevoke} from "@/api/flowable/finished";
import {getProcessDetail, flowXmlAndNode} from "@/api/flowable/definition";
import BpmnViewer from '@/components/Process/viewer';
import Printer from '@/components/Process/printer';
import {cancelTask} from "@/api/flowable/process";
import FlowRecord from "@/components/Process/record";

export default {
  name: "ProcessDetail",
  components: {
    FlowRecord,
    BpmnViewer,
    Printer
  },
  props: {
    // 回显数据传值
    flowTaskData: {
      type: Object,
      default: null,
      required: false
    },
  },
  data() {
    return {
      // 模型xml数据
      flowData: {},
      activeName: '1',
      flowRecordOpen: false,
      flowDataOpen: false,
      // 查询参数
      queryParams: {
        deptId: undefined
      },
      // 遮罩层
      loading: true,
      flowRecordList: [], // 流程流转数据
      taskForm:{
        multiple: false,
        comment:"", // 意见内容
        procInsId: "", // 流程实例编号
        executionId: "", // 任务执行ID
        instanceId: "", // 流程实例编号
        deployId: "",  // 流程定义编号
        taskId: "" ,// 流程任务编号
        procDefId: "",  // 流程模型编号
        vars: "",
      },
      printVisible:false,
      printData:{},
      flowForms: []
    };
  },
  watch: {
    flowTaskData: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.taskForm = newValue;
          // 流程任务重获取变量表单
          this.processDetail();
          // 更新抄送任务状态
          this.updateCopyTaskStatus();
          this.printData.procInsId = this.taskForm.procInsId;
        }
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === '2') {
        // 切换tab时避免重复请求接口
        if (!this.flowRecordOpen) {
           this.getFlowRecordList();
        }
      } else  if (tab.name === '3') {
        if (!this.flowDataOpen) {
          this.flowDataOpen = true;
          flowXmlAndNode(this.taskForm).then(res => {
            this.flowData = res.data;
          })
        }
      }
    },
    /** 流程流转记录 */
    getFlowRecordList() {
      const that = this
      flowRecord(this.taskForm).then(res => {
        that.flowRecordList = res.data.flowList;
        that.flowRecordOpen = true;
      })
    },
    // 获取流程变量内容
    processDetail() {
      if (this.taskForm.procInsId) {
        getProcessDetail(this.taskForm).then(res => {
          this.printData.flowForms = res.data.flowForms;
          this.printData.formData = res.data.flowData;

          this.flowForms = res.data.flowForms;
          const flowFormData = res.data.flowData;
          this.$nextTick(() => {
            this.flowForms.forEach((form, index) => {
              if (form.formType === "online") {
                this.loadOnlineForm(index, form, flowFormData);
              } else {
                this.$refs.vFormRef[index].setFormData(flowFormData, true);
              }
            });
          });
        });
      }
    },
    // 加载动态表单
    loadOnlineForm(index, form, flowFormData) {
      const vFormRef = this.$refs.vFormRef[index];
      vFormRef.setFormJson(form.formContent);
      this.$nextTick(() => {
        vFormRef.setFormData(flowFormData);
        vFormRef.disableForm();
      });
    },

    /** 更新抄送任务状态 */
    updateCopyTaskStatus() {
      if (this.taskForm.status === 0) {
        this.taskForm.status = 1;
        updateCopy(this.taskForm).then(res => {
          console.log(res.msg)
        })
      }
    },

    /** 打印预览 */
    handlePrint(){
      this.printData.procDefName = this.taskForm.procDefName;
      this.printVisible = true;
    },

    /**  取消流程申请 */
    handleCancelTask(){
      this.$confirm('是否确认撤回当前流程任务申请?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        cancelTask(this.taskForm).then(res => {
          this.$modal.msgSuccess(res.msg);
        });
      })
    },

    /** 撤回任务-下一任务未办理前撤回，流程回到上一节点 */
    handleTaskRecall() {
      this.$confirm('是否确认撤回任务重新办理?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        taskRecall(this.taskForm).then(res => {
          this.$modal.msgSuccess(res.msg);
        });
      })
    },

    /** 撤销任务-申请人执行，撤销后流程回到申请人节点可重新发起任务 */
    handleTaskRevoke() {
      this.$confirm('是否确认撤销任务重新提交申请?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        taskRevoke(this.taskForm).then(res => {
          this.$modal.msgSuccess(res.msg);
        });
      })
    },

    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      const obj = { path: "/task/copy", query: { t: Date.now()} };
      this.$tab.closeOpenPage(obj);
    },
  }
};
</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #E1F3D8;
}
</style>
